<template>
	<view class="flex-center">
		<view class="card" :style="{'backgroundColor':bgColor}">
			<view class="info" style="display: flex; flex-direction: row;">
				<view class="imageBox">
					<image :src="showImage" @error="handleImageErrSingle()" v-if="mode==2"
						style="width: 50px; height: 50px; padding-right: 10px;"></image>
				</view>
				<view class="title">
					<text v-if="mode==3" style="color: #aaa;">{{title}}</text>
					<text v-else>{{title}}</text>
				</view>
			</view>
			<view class="adBox" v-if="mode==3" style="display: flex;">
				<view v-for="(item,index) in imageList">
					<image :src="item" mode="aspectFill" @error="handleImageErr(index)"
						style="width: 90px; height: 50px; padding-right: 10px;"></image>
				</view>
			</view>
			<view class="footer flex-jc-bet">
				<view class="info">
					<view class="info-item red" v-if="isTop">
						置顶
					</view>
					<view class="info-item" v-if="mode==3" style="color: bl;">
						广告
					</view>
					<view class="info-item">
						{{from}}
					</view>
					<view class="info-item pinglun" v-if="mode!=3">
						{{num}}评
					</view>
				</view>
				<view class="info-item">
					{{time}}
				</view>
			</view>
			<slot name="tips"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: "newsCard",
		data() {
			return {
				imageDefault: '/static/imageDefault.png',
				imageFaild: '/static/imageErr.png',
				Errorimage: false,
				// imageList:[]
			};
		},
		props: {
			mode: {
				// 1:不带图片 2:带一张图 3:广告
				type: Number,
				default: 1,
				require: true
			},
			bgColor: {
				type: String,
				default: '#fff'
			},
			title: {
				type: String,
				default: "新闻标题",
				require: true
			},
			num: {
				type: Number,
				default: 0,
				require: true
			},
			from: {
				type: String,
				default: "来源",
				require: true
			},
			time: {
				type: String,
				default: "2025.10.29",
				require: true
			},
			isTop: {
				type: Boolean,
				default:false,
				require: true
			},
			showSearch: {
				type: Boolean,
				default: true,
				// default:false
				require: false
			},
			imageList: {
				type: Array,
				default: () => []
			}

		},
		computed: {
			// 图片容错
			showImage() {
				if (this.imageList[0]) {
					if (this.Errorimage) {
						console.log('showImage Error' + this.title);
					}
					return this.Errorimage ? this.imageFaild : this.imageList[0]
				} else {
					console.log("showImage Default" + this.title);
					return this.imageDefault
				}
			}
		},
		methods: {
			handleImageErr(index) {
				console.log('handleImageErr-->',index);
				this.Errorimage = true
				this.$set(this.imageList, index, this.imageFaild)
			},
			handleImageErrSingle(){
				this.Errorimage = true
				console.log("图片有错--->" + this.title);
			}
		}
	}
</script>

<style>
	.card {
		margin: 5px 0px;
		padding: 8px;
		box-sizing: border-box;
		width: 300px;
		background-color: white;
		border-radius: 10px;
	}

	.footer {
		font-size: 12px;
		color: grey;
	}

	.title {
		/* 核心样式 */
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		/* 限制显示的行数 */
		overflow: hidden;
		/* 隐藏溢出内容 */

		/* 辅助样式 */
		width: 100%;
		line-height: 1.5;
		/* 行高影响显示效果 */
		height: 50px;


	}

	.footer {
		padding-top: 10px;
	}

	.info {
		display: flex;
	}

	.info-item {
		padding-right: 10px;
	}
</style>